<template>
    <div class="hoursForest-main">
        <div class="hoursForest-content">
            <div class="days" v-for="(hour, index) in weatherData" :key="index">
                <div>{{ hour.time.slice(11, 16) }}</div>
                <div>
                    <img :src="getImgSrc(hour.weather_info)" alt="">
                </div>
                <div>{{ hour.weather_info }}</div>
                <div class="chart">
                    <div v-if="index == 0">气温</div>
                </div>
                <div>{{ hour.visibility }} {{ index == 0 ? '' : 'km'}}</div>
                <div>{{ hour.humidity }}{{ index == 0 ? '' : '%'}}</div>
                <div>{{ index == 0 ? hour.wind_direction : getWindDirection(hour.wind_direction) }}</div>
                <div>{{ getWindLevel(hour.wind_speed) }}{{ index == 0 ? '' : '级'}}</div>
            </div>
            <div class="chartItem" ref="chartItem"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHourlyForest } from '@/api/index'
import moment from 'moment'
import { getWindDirection, getWindLevel } from '@/utils/common'
import * as echarts from 'echarts'

const weatherData = ref([])

const getImgSrc = (src) => {
  return new URL(`../../../assets/images/weather/day/${src}.svg`, import.meta.url).href
}

const tempData = ref([])
const chartItem = ref()
const mychart = ref(null)

onMounted(() => {
    getData()
    mychart.value = echarts.init(chartItem.value)
});

function getData() {
    let params = {
        location: '114.3989,38.0197'
    }
    getHourlyForest(params).then(res => {
        let data = res.data.obj.detail
        data = data.filter(item => {
            if(item.time > moment().format('YYYY-MM-DD HH:mm:ss')) {
                return item
            }
        })
        weatherData.value = data.slice(0,16)
        tempData.value = data.slice(0,16).map(item => item.temperature)
        weatherData.value.unshift({
            time: '',
            weather_info: '天气',
            visibility: '能见度',
            humidity: '湿度',
            wind_direction: '风向',
            wind_speed: '风力'
        })
        
        initChart()
    })
}

defineExpose({ getData })

function initChart() {
    let option = {
        xAxis: {
            show: false,
            type: 'category',
            axisLabel: {
                interval: 0
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            show: false,
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#FFB518',
                    width: 2
                }
            },
            max: Math.max(...tempData.value),
            min: Math.min(...tempData.value),
            splitLine: {
                show: false
            },
        },
        grid: {
            // left: '-8%',
            left: '-4.5%',
            // right: '-3%',
            right: '-0.5%',
            top: '20%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                data: tempData.value,
                
                type: 'line',
                itemStyle: {
                    color: '#FFB518'
                },
                label: {
                    normal: {
                        show: true,
                        color: '#fff',
                        position: 'top',
                    }
                },
                lineStyle: {
                    color: '#FFB518',
                    width: 3
                },
            }
        ]
    };
    mychart.value.setOption(option)
}

</script>
<style lang="scss" scoped>
.hoursForest-main {
    // width: 742px;
    width: 1243px;
    height: 460px;
    background: url("@/assets/images/weather/逐时预报2.png");
    .hoursForest-content {
        padding-top: 75px;
        padding-left: 10px;
        display: flex;
        flex-direction: row;
        position: relative;
        .days:first-child {
            color: #51F1FF;
            div {
                width: 50px;
                text-align: center;
            }
        }
        .days {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            // margin-right: 25px;
            width: 70px;
            div {
                margin-bottom: 5px;
                height: 30px;
                img {
                    width: 40px;
                }
            }
            .chart {
                width: 100%;
                height: 100px;
                display: flex;
                align-items: center;
            }
        }
        .chartItem {
            // width: 600px;
            width: 1100px;
            height: 100px;
            position: absolute;
            top: 170px;
            left: 95px;
        }
    }
}
</style>